<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="childFormVisible"
      :width="dialogWidth"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="mt-dialog"
      @close="hide"
    >

      <el-upload
        v-if="action === 'create'"
        ref="upload"
        class="upload-demo"
        :headers="headers"
        :action="base_api"
        :data="model.id?{product_id: model.id}:{catalog_id:model.catalog_id }"
        :on-success="handleUploadSuccess"
        :file-list="fileList"
        multiple
        accept=".jpg,.png,.jpeg,.gif"
        list-type="picture"
        :auto-upload="false"
      >
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      </el-upload>

      <el-form
        v-else-if="action !== 'delete'"
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="80px"
        style="width: 80%; margin-left:10%;"
      >
        <el-form-item label="名称">
          <el-tag v-if="disabled" type="info" class="long_text">{{ temp.name }}</el-tag>
          <el-input v-else v-model="temp.name" type="textarea" />
        </el-form-item>

        <el-form-item v-if="action === 'view'" label="创建时间">
          <el-tag v-if="disabled" type="info">{{ temp.create_at }}</el-tag>
          <el-input v-else v-model="temp.create_at" />
        </el-form-item>
        <el-form-item v-if="action === 'view'" label="更新时间">
          <el-tag v-if="disabled" type="info">{{ temp.update_at }}</el-tag>
          <el-input v-else v-model="temp.update_at" />
        </el-form-item>
      </el-form>
      <div v-if="showBtn" slot="footer" class="dialog-footer" align="center">
        <el-button v-if="action === 'delete'" type="danger" @click="confirm">确认</el-button>
        <el-button v-else type="primary" @click="confirm">确认</el-button>
        <el-button type="info" @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Put, Delete } from '@/api/erp/elicink/image'
import { getToken } from '@/utils/auth'

export default {
  name: 'MtImage',
  props: ['model', 'action', 'dialogTitle', 'dialogFormVisible'],
  data() {
    return {
      base_api: '',
      showBtn: this.action !== 'view' && this.action !== 'create',
      disabled: false,
      temp: {},
      childFormVisible: this.dialogFormVisible,
      fileList: [],
      history: [],
      dialogWidth: ''
    }
  },
  computed: {
    headers() {
      return {
        'Authorization': getToken()
      }
    }
  },
  watch: {
    dialogFormVisible(v) {
      this.childFormVisible = v

      this.showBtn = this.action !== 'view' && this.action !== 'create'
      switch (this.action) {
        case 'create':
          this.dialogWidth = '28%'
          this.disabled = false
          this.resetTemp()
          break
        case 'delete':
          this.dialogWidth = '30%'
          this.temp = this.model
          this.disabled = false
          break
        case 'edit':
          this.dialogWidth = '30%'
          this.disabled = false
          this.temp = Object.assign({}, this.model)
          break
        case 'view':
          this.dialogWidth = '28%'
          this.disabled = true
          this.temp = this.model
          break
      }
    }
  },
  created() {
    this.history = []
    this.base_api = process.env.VUE_APP_BASE_API + '/erp/api/image/'
  },
  methods: {
    resetTemp() {
      this.fileList = []
    },
    confirm() {
      const _data = this.temp
      switch (this.action) {
        case 'delete':
          Delete(_data.id).then((response) => {
            this.childFormVisible = false
            this.$emit('reload')
            this.notify('删除成功')
          })
          break
        case 'edit':
          Put(_data.id, {
            name: _data.name
          }).then((response) => {
            this.childFormVisible = false
            this.$emit('reload')
            this.notify('更新成功')
          })
          break
      }
    },
    cancel() {
      this.childFormVisible = false
    },
    hide() {
      console.log('image 暂时数据', this.temp)
      if (!this.childFormVisible) this.childFormVisible = false
      if (this.action === 'create' && this.history.length > 0) this.$emit('reload')
      this.$emit('cancelDialog', false)
    },
    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    handleUploadSuccess(res) {
      // 如果上传成功 记录历史，用于 刷新 父控件
      if (res.success) {
        this.history.push(1)
        this.notify(res.data.name + '上传成功')
      } else {
        this.$notify({
          title: '失败',
          message: res.msg,
          type: 'error',
          duration: 8000
        })
      }
    }
  }
}
</script>

<style scoped>
  .mt-dialog >>> span.el-dialog__title {
    word-break: normal;
    width: auto;
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
  }

</style>
